<template>
    <el-card class="box-card" :style="{'line-height':enableSwap?'':'25px'}">
        <div slot="header" class="clearfix">
            <span>CPU信息</span>
        </div>
        <div>
            <div id="main" style="width: 600px;height:400px;"></div>
        </div>
    </el-card>

</template>

<script>
    import { ipcRenderer } from "electron";
    export default {
        name: 'index',
        created() {
        },
        data() {
            return {
                enableSwap: false,
                cpuInfo: [],
                myChart: null,
                tableOption: {
                    xAxis: {},
                    yAxis: {},
                    label: {},
                    tooltip: {},
                    dataZoom: [],
                    series: [],
                    legend: {}
                },
            };
        },
        mounted() {
            this.initTable();
            this.timer = setInterval(this.getCpuInfo, 5000);
        },
        methods: {
            initTable() {
                this.tableOption.legend= {
                    show: false,
                    data: [1,2,3,4,5,6,7,0]
                },
                this.tableOption.xAxis = {
                    type: 'category',
                    data: [], // x轴数据
                    name: '时间', // x轴名称
                    // x轴名称样式
                    nameTextStyle: {
                        fontWeight: 300,
                        fontSize: 15
                    }
                }
                this.tableOption.yAxis = {
                    type: 'value',
                    boundaryGap: false,
                    axisLabel: {
                        show: true,
                        interval: 'auto',
                        formatter: '{value} %'
                    },
                    // y轴名称样式
                    nameTextStyle: {
                        fontWeight: 300,
                        fontSize: 15
                    },
                    min:function(value){
                        return (value.min - 1).toFixed(0);
                    }
                }
                this.tableOption.dataZoom = [{
                    show: true,
                    start: this.charZoomStart,
                    end: this.charZoomEnd
                }]
                this.myChart = this.$echarts.init(document.getElementById('main'));
                this.myChart.setOption(this.tableOption)
                this.myChart.on('dataZoom', function (event) {
                    if (event.batch) {
                        that.charZoomStart = event.batch[0].start
                        that.charZoomEnd = event.batch[0].end
                    } else {
                        that.charZoomStart = event.start
                        that.charZoomEnd = event.end
                    }
                })
            },
            getCurrentTime() {
                //获取当前时间并打印
                var _this = this;
                let hh = new Date().getHours();
                let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
                let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
                _this.gettime = hh+':'+mf+':'+ss;
                return _this.gettime
            },
            getCpuInfo() {
                const that = this
                ipcRenderer.invoke("getCpuInfo").then(res => {
                    that.tableOption.xAxis.data.push(this.getCurrentTime())
                    res.forEach((v,i)=>{
                        that.tableOption.legend.data.push(v.id)
                        if (that.tableOption.series[i] === undefined) {
                            const data = {
                                name: v.id,
                                data: [],
                                type: 'line',
                                smooth: true
                            }
                            data.data.push(v.usage)
                            that.tableOption.series.push(data)
                        } else {
                            that.tableOption.series[v.id].data.push(v.usage)
                        }
                    })
                    that.myChart.setOption(that.tableOption,true);
                });

            }
        }
    };
</script>
